<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>流式输出测试</title>
    <style>
        #message-area {
            width: 80%;
            height: 200px;
            font-size: 16px;
            line-height: 1.5;
        }
    </style>
</head>
<body>
    <h2>流式输出测试</h2>
    <textarea id="message-area" readonly></textarea>
    <br>
    <button onclick="testStream()">开始流式测试</button>
    <script>
    function testStream() {
        const area = document.getElementById('message-area');
        area.value = '';
        fetch('/api/client/message/testStream', {
            headers: {
                'token': '304099c3b7702ada92dabff37c39615b'
            }
        })
            .then(response => {
                const reader = response.body.getReader();
                const decoder = new TextDecoder('utf-8');
                function read() {
                    reader.read().then(({ done, value }) => {
                        if (done) return;
                        const chunk = decoder.decode(value, { stream: true });
                        area.value += chunk;
                        area.scrollTop = area.scrollHeight;
                        read();
                    });
                }
                read();
            });
    }
    </script>
</body>
</html> 